<template>
  <div class="windowInfo windowInfo4">
    <!-- <img
      src="../../../../public/hide1.png"
      alt
      @click="hideBox"
      style="width: 20px; position: absolute; right: 10px; top: 10px; z-index: 2; cursor: pointer"
    /> -->
    <div class="logs">
      <div style="width:100%;display:flex;border-bottom:1px solid ">

        <h4 style="width:calc(100% - 50px);text-align:center">交互信息状态</h4>
        <a-button @click="handleClick" size='small' type='primary'>清除</a-button>
      </div>
      <div v-for="item in dataSource" :key='item.id'>
        <p class="messageTxt">{{ item.createTime }} &nbsp; {{ item.message }}</p>
      </div>
      <!-- <a-table :scroll={y:250} size="small" :columns="columns" :data-source="dataSource" :pagination="false" bordered>
         <span slot="message" slot-scope="text, record">
          <div class="messageTxt">{{record.message}}</div>
        </span>
      </a-table> -->
    </div>
  </div>
</template>
<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { mapGetters } from 'vuex'
const columns = [
  //   {
  //     title: '创建人',
  //     dataIndex: 'createBy',
  //     key: 'createBy',
  //   },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 180,
    // customRender: function (text) {
    //   return text + 'kbps'
    // },
  },
  {
    title: '消息',
    key: 'message',
    width: 230,
    ellipsis: true,
    dataIndex: 'message',
    scopedSlots: {
      customRender: 'message'
    }
    // customRender: function (text) {
    //   return text + 'dB'
    // },
    // scopedSlots: { customRender: 'tags' },
  },
]

import $ from 'jquery'
import { getAction } from '@/api/manage'
export default {
  computed: {
    ...mapGetters(['websocketMsg']),
    websocketMsg() {
      return this.$store.state.user.websocketMsg
    },
  },
  watch: {
    websocketMsg: {
      handler(val) {
        let msg = JSON.parse(val)
        if (msg.cmd == 'WEB_CONSOLE_MESSAGE') {
          this.loadData()
        }
      },
    },
  },
  mixins: [JeecgListMixin],
  data() {
    return {
      columns,
      url: {
        list: '/webConsole/nmsWebConsoleMessage/getCurrentDayWebConsoleMessage'
      },
      dataSource: [],
    }
  },
  methods: {
    loadData(){},
    handleClick() {
      this.dataSource = []
    },
    // getList() {
    //   getAction(this.url.getInteractionStatus).then(res => {
    //     if (res.success) {
    //       this.data = res.result
    //     } else {
    //       this.$message.error(res.message)
    //     }
    //   })
    // },
    // edit(val) {
    //   if (val == '指控车1') {
    //     this.data = JSON.parse(JSON.stringify(this.data1))
    //   }
    //   if (val == '指控车2') {
    //     this.data = JSON.parse(JSON.stringify(this.data2))
    //   }
    //   if (val == '指控车3') {
    //     this.data = JSON.parse(JSON.stringify(this.data3))
    //   }
    // },
    hideBox() {
      $('.logs').fadeToggle(1000)
    },
  },
}
</script>
<style>
.windowInfo4 .ant-table {
  line-height: 0.5;
}

.windowInfo .ant-table-thead>tr>th,
.windowInfo .ant-table-tbody>tr>td {
  color: #fff;
  /* background: rgba(30, 36, 50, 0) !important; */
}

.windowInfo .ant-pagination-item a,
.windowInfo .ant-pagination-item-active a,
.windowInfo .ant-pagination-disabled a,
.windowInfo .ant-pagination-disabled:hover a,
.windowInfo .ant-pagination-disabled:focus a,
.windowInfo .ant-pagination-disabled .ant-pagination-item-link,
.windowInfo .ant-pagination-disabled:hover .ant-pagination-item-link,
.windowInfo .ant-pagination-disabled:focus .ant-pagination-item-link {
  /* background: rgba(30, 36, 50, 0) !important; */
}
</style>
<style lang="less" scoped>
.windowInfo4 {
  max-height: calc(100vh - 300px);
  overflow-y: scroll;

  .messageTxt {
    width: 100%;
    // line-height: 1.1;
    font-size: 14px;
    text-align: left;
    word-wrap: break-word;
    padding: 1px !important;
    white-space: pre-wrap;
    margin: 0;
  }
}

.windowInfo {
  position: relative;
  min-width: 40px;
  min-height: 40px;

  h3 {
    color: #fff;
  }

  color: #fff;
  padding: 5px 2px;
  // background: rgba(30, 36, 50, 0.6) !important;
}

.ant-table-thead {
  // background: rgba(30, 36, 50, 0) !important;
}

.windowInfo .logs .ant-table {
  .windowInfo .ant-table-thead>tr>th {
    color: #fff;
    // background: rgba(30, 36, 50, 0) !important;
  }

  .windowInfo .ant-table-thead>td {
    color: #fff;
  }
}

.windowInfo .ant-table-wrapper {
  color: #fff;
  // background: rgba(30, 36, 50, 0) !important;
}

.windowInfo .logs,
.windowInfo .logs .ant-card-head,
.windowInfo .logs .ant-card-body {
  // background: rgba(30, 36, 50, 0) !important;
}

/* 四角边框--start */
.windowInfo {
  position: relative;
  // width: 300px;
  // /* height: 300px; */
  // margin: 300px auto;
  // /* background: rgba(1, 19, 67, 0.8); */

  border: 2px solid #58d0f3 !important;
  z-index: 1;
}

.windowInfo::before {
  position: absolute;
  content: '';
  top: -2px;
  bottom: -2px;
  left: 30px;
  width: calc(100% - 60px);
  /* border-top: 2px solid #016886; */
  /* border-bottom: 2px solid #016886; */
  border-bottom: 0px solid #4f78ae !important;
  border-top: 2px solid #4f78ae;
  z-index: -1;
}

.windowInfo::after {
  position: absolute;
  content: '';
  top: 30px;
  right: -2px;
  left: -2px;
  height: calc(100% - 60px);
  border-right: 2px solid #4f78ae;
  border-left: 2px solid #4f78ae;
  z-index: -1;
}

/* 四角边框--end */
</style>
